<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字在·自在 - 从甲骨文到Emoji的文字之旅</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fall {
            to { transform: translateY(100vh); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }
        
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fall {
            animation: fall 4s linear infinite;
        }
        
        .animate-twinkle {
            animation: twinkle 2s ease-in-out infinite;
        }
        
        .animate-fade-in {
            animation: fade-in 0.5s ease-out;
        }
        
        .transition-all {
            transition: all 0.3s ease;
        }
        
        .duration-2000 {
            transition-duration: 2000ms;
        }
        
        .duration-3000 {
            transition-duration: 3000ms;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        const { useState, useEffect, useRef } = React;
        
        // 简化的图标组件
        const ChevronUp = ({className}) => (
            <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polyline points="18 15 12 9 6 15"></polyline>
            </svg>
        );
        
        const Share2 = ({className}) => (
            <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="18" cy="5" r="3"></circle>
                <circle cx="6" cy="12" r="3"></circle>
                <circle cx="18" cy="19" r="3"></circle>
                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
            </svg>
        );
        
        const Heart = ({className}) => (
            <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
            </svg>
        );
        
        const RefreshCw = ({className}) => (
            <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <polyline points="1 20 1 14 7 14"></polyline>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
        );
        
        const Sparkles = ({className}) => (
            <svg className={className} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M12 3l1.912 5.813 6.088.387-4.5 4.5.387 6.088L12 15.3l-5.813 1.912-.387-6.088-4.5-4.5 6.088-.387z"></path>
            </svg>
        );

        const ZiZaiZiZai = () => {
            const [currentPage, setCurrentPage] = useState(0);
            const [userMood, setUserMood] = useState('');
            const [drawnCharacter, setDrawnCharacter] = useState(false);
            const [createdWord, setCreatedWord] = useState('');
            const [userMessage, setUserMessage] = useState('');
            const [participantCount, setParticipantCount] = useState(12580);
            const [isPlaying, setIsPlaying] = useState(false);
            const canvasRef = useRef(null);
            const [touchStart, setTouchStart] = useState(0);
            const [doorOpened, setDoorOpened] = useState(false);
            const [selectedEmotions, setSelectedEmotions] = useState([]);

            useEffect(() => {
                const interval = setInterval(() => {
                    setParticipantCount(prev => prev + Math.floor(Math.random() * 3));
                }, 5000);
                return () => clearInterval(interval);
            }, []);

            // Page 1: 时光之门
            const Page1 = () => (
                <div className="page h-screen bg-black flex flex-col items-center justify-center relative overflow-hidden">
                    <div className={`transition-all duration-3000 ${doorOpened ? 'scale-150 opacity-0' : ''}`}>
                        <div className="relative">
                            <div className={`door-container ${doorOpened ? 'opened' : ''}`}>
                                <div className="door-left absolute w-32 h-64 bg-gradient-to-r from-amber-900 to-amber-700 transition-transform duration-2000"
                                     style={{
                                       left: doorOpened ? '-100px' : '0',
                                       borderRight: '2px solid gold',
                                       boxShadow: doorOpened ? '0 0 50px rgba(255,215,0,0.5)' : 'none'
                                     }}>
                                    <div className="mt-16 ml-4">
                                        <svg width="80" height="80" viewBox="0 0 80 80" className="opacity-70">
                                            <rect x="10" y="10" width="25" height="60" fill="none" stroke="#fcd34d" strokeWidth="3"/>
                                            <rect x="45" y="10" width="25" height="60" fill="none" stroke="#fcd34d" strokeWidth="3"/>
                                            <line x1="35" y1="40" x2="45" y2="40" stroke="#fcd34d" strokeWidth="2"/>
                                        </svg>
                                        <p className="text-amber-300 text-sm text-center mt-1">甲骨文"門"</p>
                                    </div>
                                </div>
                                <div className="door-right absolute w-32 h-64 bg-gradient-to-l from-amber-900 to-amber-700 transition-transform duration-2000"
                                     style={{
                                       right: doorOpened ? '-100px' : '0',
                                       left: '128px',
                                       borderLeft: '2px solid gold',
                                       boxShadow: doorOpened ? '0 0 50px rgba(255,215,0,0.5)' : 'none'
                                     }}>
                                </div>
                            </div>
                            {doorOpened && (
                                <div className="absolute inset-0 flex items-center justify-center animate-pulse">
                                    <div className="w-64 h-64 bg-gradient-radial from-yellow-200 via-amber-300 to-transparent rounded-full blur-xl"></div>
                                </div>
                            )}
                        </div>
                    </div>
                    
                    <div className="text-center mt-10 px-6">
                        <p className="text-amber-100 text-lg mb-2 font-light tracking-wider">每一个汉字，都是一扇门</p>
                        <p className="text-amber-200 text-lg font-light tracking-wider">门后，是三千年的心跳声</p>
                    </div>
                    
                    <button 
                        onClick={() => {
                            setDoorOpened(true);
                            setTimeout(() => setCurrentPage(1), 2000);
                        }}
                        className="mt-12 px-8 py-3 bg-gradient-to-r from-amber-600 to-amber-500 text-white rounded-full shadow-lg animate-pulse hover:scale-110 transition-transform inline-flex items-center"
                    >
                        <ChevronUp className="inline mr-2" />
                        推开时光之门
                    </button>
                </div>
            );

            // Page 2: 最初的表达
            const Page2 = () => {
                const handleDrawing = (e) => {
                    if (!canvasRef.current) return;
                    const canvas = canvasRef.current;
                    const ctx = canvas.getContext('2d');
                    const rect = canvas.getBoundingClientRect();
                    
                    const drawLine = (e) => {
                        ctx.strokeStyle = '#d4a574';
                        ctx.lineWidth = 3;
                        ctx.lineCap = 'round';
                        ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
                        ctx.stroke();
                    };
                    
                    canvas.addEventListener('mousemove', drawLine);
                    canvas.addEventListener('mouseup', () => {
                        canvas.removeEventListener('mousemove', drawLine);
                        setDrawnCharacter(true);
                        setTimeout(() => {
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            ctx.font = '60px serif';
                            ctx.fillStyle = '#fbbf24';
                            ctx.fillText('人', 60, 80);
                        }, 1000);
                    });
                };

                return (
                    <div className="page h-screen bg-gradient-to-b from-amber-50 to-amber-100 flex flex-col items-center justify-center px-6">
                        <div className="oracle-bone-texture bg-gradient-to-br from-yellow-100 to-amber-200 p-8 rounded-lg shadow-2xl max-w-md w-full">
                            <div className="flex justify-around items-center mb-6">
                                <div className="text-center">
                                    <svg width="60" height="60" viewBox="0 0 60 60" className="mb-2">
                                        <path d="M 30 15 L 25 35 L 20 55 M 30 15 L 35 35 L 40 55" 
                                              stroke="#92400e" strokeWidth="3" fill="none" strokeLinecap="round"/>
                                    </svg>
                                    <p className="text-sm text-amber-700">甲骨文</p>
                                </div>
                                <div className="text-center">
                                    <div className="text-6xl mb-2">人</div>
                                    <p className="text-sm text-amber-700">现代汉字</p>
                                </div>
                                <div className="text-center">
                                    <div className="text-6xl mb-2">🚶</div>
                                    <p className="text-sm text-amber-700">Emoji</p>
                                </div>
                            </div>
                            
                            <canvas 
                                ref={canvasRef}
                                width={200}
                                height={150}
                                className="border-2 border-dashed border-amber-400 rounded-lg mx-auto bg-white cursor-crosshair"
                                onMouseDown={handleDrawing}
                            />
                            
                            <p className="text-center mt-4 text-amber-700">👆 试试临摹"人"字</p>
                        </div>
                        
                        <div className="mt-8 text-center max-w-md">
                            <p className="text-amber-900 text-lg mb-2">3000年前，祖先用刀在龟甲上刻下'人'</p>
                            <p className="text-amber-900 text-lg mb-2">今天，我们用手指在屏幕上画出 🚶</p>
                            <p className="text-amber-800 text-lg font-semibold">表达的冲动，从未改变</p>
                        </div>
                    </div>
                );
            };

            // Page 3: 喜-欢笑跨越千年
            const Page3 = () => (
                <div className="page h-screen bg-gradient-to-b from-red-50 to-pink-100 flex flex-col items-center justify-center px-6">
                    <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
                        <div className="text-center mb-6">
                            <div className="relative inline-block">
                                <svg width="120" height="120" viewBox="0 0 120 120" className="mb-2">
                                    <ellipse cx="60" cy="30" rx="35" ry="15" fill="#dc2626" opacity="0.8"/>
                                    <rect x="25" y="30" width="70" height="40" fill="#dc2626" opacity="0.6" rx="2"/>
                                    <ellipse cx="60" cy="70" rx="35" ry="15" fill="#dc2626" opacity="0.8"/>
                                    <line x1="20" y1="20" x2="40" y2="30" stroke="#7f1d1d" strokeWidth="3" strokeLinecap="round"/>
                                    <circle cx="20" cy="20" r="5" fill="#7f1d1d"/>
                                    <ellipse cx="60" cy="95" rx="25" ry="12" fill="none" stroke="#dc2626" strokeWidth="3"/>
                                    <path d="M 35 95 Q 60 105 85 95" fill="none" stroke="#dc2626" strokeWidth="2"/>
                                </svg>
                                <p className="text-sm text-gray-600">甲骨文「喜」= 击鼓(上) + 欢歌(下)</p>
                            </div>
                        </div>
                        
                        <div className="flex justify-center gap-4 mb-6">
                            {['😊', '😄', '🤣', '😍', '🥳'].map((emoji, idx) => (
                                <span 
                                    key={idx}
                                    className="text-4xl cursor-pointer transform hover:scale-125 transition-transform"
                                    onClick={() => {
                                        setUserMood(emoji);
                                        setIsPlaying(true);
                                        setTimeout(() => setIsPlaying(false), 1000);
                                    }}
                                >
                                    {emoji}
                                </span>
                            ))}
                        </div>
                        
                        <div className="bg-gradient-to-r from-pink-100 to-red-100 rounded-lg p-4">
                            <p className="text-center text-gray-700 mb-3">你今天的心情是？</p>
                            <div className="flex justify-center gap-4">
                                <button 
                                    className="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition"
                                    onClick={() => setUserMood('甲骨文-喜')}
                                >
                                    击鼓而歌 🥁
                                </button>
                                <button 
                                    className="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition"
                                    onClick={() => setUserMood('emoji-😊')}
                                >
                                    会心一笑 😊
                                </button>
                            </div>
                        </div>
                        
                        {userMood && (
                            <p className="text-center mt-4 text-lg text-gray-700 animate-fade-in">
                                你选择了：{userMood}
                            </p>
                        )}
                    </div>
                    
                    <div className="mt-8 text-center max-w-md">
                        <p className="text-gray-700 text-lg italic">
                            "甲骨文的'喜'，是击鼓而歌<br/>
                            emoji的😊，是会心一笑<br/>
                            快乐，是人类永恒的语言"
                        </p>
                    </div>
                </div>
            );

            // Page 4: 怒-愤怒的演变
            const Page4 = () => {
                const [isCalm, setIsCalm] = useState(false);
                
                return (
                    <div className="page h-screen bg-gradient-to-b from-gray-800 to-red-900 flex flex-col items-center justify-center px-6">
                        <div className="bg-gradient-to-b from-gray-100 to-red-100 rounded-2xl shadow-2xl p-8 max-w-md w-full">
                            <div className="text-center mb-6">
                                <svg width="100" height="100" viewBox="0 0 100 100" className={`transition-all duration-2000 ${isCalm ? 'opacity-50' : ''}`}>
                                    <path d="M 50 30 C 45 25, 35 25, 35 35 C 35 45, 50 60, 50 60 C 50 60, 65 45, 65 35 C 65 25, 55 25, 50 30" 
                                          fill={isCalm ? '#16a34a' : '#dc2626'} opacity="0.8"/>
                                    {!isCalm && (
                                        <>
                                            <line x1="30" y1="40" x2="70" y2="40" stroke="#7f1d1d" strokeWidth="2"/>
                                            <line x1="30" y1="45" x2="70" y2="45" stroke="#7f1d1d" strokeWidth="2"/>
                                            <line x1="30" y1="50" x2="70" y2="50" stroke="#7f1d1d" strokeWidth="2"/>
                                        </>
                                    )}
                                </svg>
                                {isCalm ? (
                                    <div className="text-4xl text-green-600 font-bold">息</div>
                                ) : (
                                    <div className="text-4xl text-red-600 font-bold">怒</div>
                                )}
                                <p className="text-sm text-gray-600 mt-2">心 + 束缚 = 怒</p>
                            </div>
                            
                            <div className="flex justify-center gap-4 mb-6">
                                {['😠', '💢', '🤬', '😤'].map((emoji, idx) => (
                                    <span key={idx} className="text-4xl animate-pulse" style={{animationDelay: `${idx * 0.2}s`}}>
                                        {emoji}
                                    </span>
                                ))}
                            </div>
                            
                            <div className="bg-white rounded-lg p-4 mb-4">
                                <p className="text-center text-gray-700 mb-3">
                                    古人说：怒，心之奴也<br/>
                                    当心被情绪束缚，便成了怒
                                </p>
                                <button 
                                    onClick={() => setIsCalm(true)}
                                    className="w-full py-3 bg-gradient-to-r from-blue-500 to-green-500 text-white rounded-full hover:scale-105 transition-transform"
                                >
                                    深呼吸，化怒为息 🧘
                                </button>
                            </div>
                            
                            {isCalm && (
                                <div className="text-center text-green-600 animate-fade-in inline-flex items-center">
                                    <Sparkles className="inline mr-2" />
                                    内心已归于平静
                                </div>
                            )}
                        </div>
                    </div>
                );
            };

            // Page 5: 哀-悲伤的共鸣
            const Page5 = () => {
                const [showRainbow, setShowRainbow] = useState(false);
                
                return (
                    <div className="page h-screen bg-gradient-to-b from-gray-300 to-blue-200 flex flex-col items-center justify-center px-6 relative">
                        {!showRainbow && (
                            <div className="absolute inset-0 pointer-events-none">
                                {[...Array(20)].map((_, i) => (
                                    <div
                                        key={i}
                                        className="absolute animate-fall"
                                        style={{
                                            left: `${Math.random() * 100}%`,
                                            animationDelay: `${Math.random() * 3}s`,
                                            animationDuration: `${3 + Math.random() * 2}s`
                                        }}
                                    >
                                        💧
                                    </div>
                                ))}
                            </div>
                        )}
                        
                        {showRainbow && (
                            <div className="absolute top-10 w-full flex justify-center">
                                <div className="text-6xl animate-fade-in">🌈</div>
                            </div>
                        )}
                        
                        <div className="bg-white/90 rounded-2xl shadow-xl p-8 max-w-md w-full z-10">
                            <div className="text-center mb-6">
                                <svg width="100" height="100" viewBox="0 0 100 100" className="inline-block mb-2">
                                    <path d="M 30 30 L 40 20 L 60 20 L 70 30 L 70 60 L 60 70 L 40 70 L 30 60 Z" 
                                          fill="none" stroke="#6b7280" strokeWidth="2" strokeDasharray="5,3"/>
                                    <ellipse cx="50" cy="45" rx="15" ry="8" fill="none" stroke="#3b82f6" strokeWidth="2"/>
                                    <path d="M 35 45 Q 50 50 65 45" fill="none" stroke="#3b82f6" strokeWidth="2"/>
                                    <circle cx="40" cy="55" r="3" fill="#60a5fa"/>
                                    <circle cx="60" cy="55" r="3" fill="#60a5fa"/>
                                </svg>
                                <div className="text-3xl font-bold text-blue-600">哀</div>
                                <p className="text-sm text-gray-600">衣 + 口 = 披衣而泣</p>
                            </div>
                            
                            <div className="flex justify-center gap-4 mb-6">
                                {['😢', '💔', '😭', '😔'].map((emoji, idx) => (
                                    <span key={idx} className="text-4xl opacity-70">
                                        {emoji}
                                    </span>
                                ))}
                            </div>
                            
                            <div className="text-center mb-4 text-gray-700">
                                <p className="mb-2">甲骨文的'哀'，是披衣而泣</p>
                                <p className="mb-2">手机里的😢，是一滴泪</p>
                                <p className="font-semibold">悲伤无需多言，一个符号，足以传递万千</p>
                            </div>
                            
                            <button 
                                onMouseDown={() => setShowRainbow(false)}
                                onMouseUp={() => setShowRainbow(true)}
                                className="w-full py-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition"
                            >
                                长按屏幕，雨后见彩虹 🌈
                            </button>
                        </div>
                    </div>
                );
            };

            // Page 6: 乐-永恒的追求
            const Page6 = () => {
                const instruments = ['🥁', '🎸', '🎹', '🎺', '🎻'];
                const [playedNotes, setPlayedNotes] = useState([]);
                const [musicPattern, setMusicPattern] = useState([]);
                
                const playInstrument = (instrument) => {
                    const newPattern = [...musicPattern, instrument];
                    setMusicPattern(newPattern);
                    setPlayedNotes([...playedNotes, instrument]);
                    setTimeout(() => {
                        setPlayedNotes(prev => prev.filter(i => i !== instrument));
                    }, 500);
                };
                
                return (
                    <div className="page h-screen bg-gradient-to-b from-purple-100 to-pink-100 flex flex-col items-center justify-center px-6">
                        <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
                            <div className="text-center mb-6">
                                <svg width="100" height="100" viewBox="0 0 100 100" className="inline-block mb-2">
                                    <line x1="20" y1="20" x2="20" y2="70" stroke="#8b4513" strokeWidth="4"/>
                                    <line x1="80" y1="20" x2="80" y2="70" stroke="#8b4513" strokeWidth="4"/>
                                    <line x1="15" y1="25" x2="85" y2="25" stroke="#8b4513" strokeWidth="3"/>
                                    <circle cx="35" cy="40" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2"/>
                                    <circle cx="50" cy="45" r="7" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2"/>
                                    <circle cx="65" cy="40" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2"/>
                                    <line x1="35" y1="25" x2="35" y2="32" stroke="#666" strokeWidth="1"/>
                                    <line x1="50" y1="25" x2="50" y2="38" stroke="#666" strokeWidth="1"/>
                                    <line x1="65" y1="25" x2="65" y2="32" stroke="#666" strokeWidth="1"/>
                                </svg>
                                <div className="text-3xl font-bold text-purple-600">乐</div>
                                <p className="text-sm text-gray-600">甲骨文：木架上的乐器</p>
                            </div>
                            
                            <div className="flex justify-center gap-3 mb-6">
                                {instruments.map((inst, idx) => (
                                    <button
                                        key={idx}
                                        onClick={() => playInstrument(inst)}
                                        className={`text-5xl transform transition-all hover:scale-125 ${
                                            playedNotes.includes(inst) ? 'scale-150 animate-bounce' : ''
                                        }`}
                                    >
                                        {inst}
                                    </button>
                                ))}
                            </div>
                            
                            <div className="bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg p-4 mb-4">
                                <p className="text-center text-gray-700 mb-3">点击乐器，创作你的节奏</p>
                                <div className="flex justify-center flex-wrap gap-2 min-h-[40px]">
                                    {musicPattern.map((note, idx) => (
                                        <span key={idx} className="text-2xl animate-fade-in">
                                            {note}
                                        </span>
                                    ))}
                                </div>
                            </div>
                            
                            {musicPattern.length > 3 && (
                                <div className="text-center">
                                    <p className="text-purple-600 font-semibold">
                                        你的快乐密码已生成！
                                    </p>
                                    <button 
                                        onClick={() => setMusicPattern([])}
                                        className="mt-2 text-sm text-gray-500 underline"
                                    >
                                        重新创作
                                    </button>
                                </div>
                            )}
                        </div>
                        
                        <div className="mt-6 text-center text-gray-700 max-w-md">
                            <p className="italic">
                                "从甲骨文到emoji<br/>
                                快乐，一直是人类最美的追求"
                            </p>
                        </div>
                    </div>
                );
            };

            // Page 7: 造字游戏
            const Page7 = () => {
                const components = [
                    { char: '日', meaning: '太阳' },
                    { char: '月', meaning: '月亮' },
                    { char: '山', meaning: '山峰' },
                    { char: '水', meaning: '流水' },
                    { char: '心', meaning: '心脏' },
                    { char: '手', meaning: '手掌' },
                    { char: '口', meaning: '嘴巴' },
                    { char: '木', meaning: '树木' }
                ];
                const emojis = ['❤️', '🌟', '🔥', '💧', '🌈', '✨'];
                const [selectedComponents, setSelectedComponents] = useState([]);
                const [selectedEmoji, setSelectedEmoji] = useState('');
                
                const addComponent = (comp) => {
                    if (selectedComponents.length < 3) {
                        setSelectedComponents([...selectedComponents, comp.char]);
                    }
                };
                
                const generateMeaning = () => {
                    const meanings = {
                        '日月': '明 - 光明',
                        '山水': '景 - 风景',
                        '心手': '慰 - 安慰',
                        '日心': '意 - 心意',
                        '水木': '沐 - 沐浴',
                        '口心': '念 - 思念',
                        '手口': '拜 - 拜托',
                        '日水': '泉 - 清泉',
                        '月心': '情 - 情感'
                    };
                    const key = selectedComponents.slice(0, 2).join('');
                    return meanings[key] || '你创造了独特的表达！';
                };
                
                return (
                    <div className="page h-screen bg-gradient-to-b from-indigo-100 to-purple-100 flex flex-col items-center justify-center px-6">
                        <div className="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full">
                            <h3 className="text-2xl font-bold text-center mb-4 text-indigo-600">
                                造字工坊
                            </h3>
                            
                            <div className="mb-4">
                                <p className="text-sm text-gray-600 mb-2">选择甲骨文部件：</p>
                                <div className="grid grid-cols-4 gap-2">
                                    {components.map((comp, idx) => (
                                        <button
                                            key={idx}
                                            onClick={() => addComponent(comp)}
                                            className="p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition group relative"
                                        >
                                            <div className="text-xl">{comp.char}</div>
                                            <div className="text-xs text-gray-500 absolute bottom-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                                {comp.meaning}
                                            </div>
                                        </button>
                                    ))}
                                </div>
                            </div>
                            
                            <div className="mb-4">
                                <p className="text-sm text-gray-600 mb-2">添加emoji元素：</p>
                                <div className="flex gap-2 justify-center">
                                    {emojis.map((emoji, idx) => (
                                        <button
                                            key={idx}
                                            onClick={() => setSelectedEmoji(emoji)}
                                            className="text-2xl hover:scale-125 transition-transform"
                                        >
                                            {emoji}
                                        </button>
                                    ))}
                                </div>
                            </div>
                            
                            <div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-4 mb-4">
                                <p className="text-center text-gray-600 mb-2">你的创造：</p>
                                <div className="flex justify-center items-center gap-2 text-3xl min-h-[50px]">
                                    {selectedComponents.map((comp, idx) => (
                                        <span key={idx}>{comp}</span>
                                    ))}
                                    {selectedEmoji && <span>{selectedEmoji}</span>}
                                </div>
                                {selectedComponents.length >= 2 && (
                                    <p className="text-center text-sm text-indigo-600 mt-2">
                                        {generateMeaning()}
                                    </p>
                                )}
                            </div>
                            
                            <div className="flex gap-2">
                                <button 
                                    onClick={() => {
                                        setSelectedComponents([]);
                                        setSelectedEmoji('');
                                    }}
                                    className="flex-1 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition inline-flex items-center justify-center"
                                >
                                    <RefreshCw className="inline w-4 h-4 mr-1" />
                                    重新创造
                                </button>
                                <button 
                                    className="flex-1 py-2 bg-indigo-500 text-white rounded-full hover:bg-indigo-600 transition inline-flex items-center justify-center"
                                >
                                    <Share2 className="inline w-4 h-4 mr-1" />
                                    保存分享
                                </button>
                            </div>
                        </div>
                        
                        <p className="mt-4 text-center text-gray-600 text-sm max-w-md">
                            "3000年前，祖先造字。今天，你也可以。"
                        </p>
                    </div>
                );
            };

            // Page 8: 文明的传承
            const Page8 = () => {
                const evolution = [
                    { era: '甲骨文', type: 'oracle', year: '前1600', desc: '用"好"表爱' },
                    { era: '金文', type: 'bronze', year: '前1000' },
                    { era: '篆书', type: 'seal', year: '前221' },
                    { era: '楷书', type: 'regular', year: '200' },
                    { era: '简体', type: 'simplified', year: '1956' },
                    { era: 'Emoji', type: 'emoji', year: '2010' }
                ];
                
                const renderEvolutionChar = (item) => {
                    switch(item.type) {
                        case 'oracle':
                            return (
                                <svg width="40" height="45" viewBox="0 0 40 45">
                                    <path d="M 10 15 Q 8 10, 12 10 Q 16 10, 14 15 L 12 25 L 8 30 L 10 35" 
                                          stroke="#9333ea" strokeWidth="2" fill="none" strokeLinecap="round"/>
                                    <path d="M 8 20 L 16 18" stroke="#9333ea" strokeWidth="2"/>
                                    <path d="M 25 12 Q 28 10, 30 12 L 28 20" 
                                          stroke="#9333ea" strokeWidth="2" fill="none" strokeLinecap="round"/>
                                    <path d="M 24 18 L 32 18" stroke="#9333ea" strokeWidth="2"/>
                                    <text x="20" y="42" fontSize="8" fill="#9333ea" textAnchor="middle">好(hǎo)</text>
                                </svg>
                            );
                        case 'bronze':
                            return (
                                <svg width="40" height="45" viewBox="0 0 40 45">
                                    <path d="M 20 5 L 20 12 M 15 7 L 25 7" 
                                          stroke="#9333ea" strokeWidth="2" strokeLinecap="round"/>
                                    <path d="M 12 10 Q 20 14, 28 10" 
                                          stroke="#9333ea" strokeWidth="2" fill="none"/>
                                    <circle cx="20" cy="20" r="2" fill="#9333ea"/>
                                    <path d="M 14 18 Q 20 22, 26 18" stroke="#9333ea" strokeWidth="2" fill="none"/>
                                    <path d="M 16 22 L 16 24 M 24 22 L 24 24" stroke="#9333ea" strokeWidth="1.5"/>
                                    <path d="M 20 26 L 18 32 M 20 26 L 22 32" stroke="#9333ea" strokeWidth="2"/>
                                    <path d="M 15 30 L 25 30" stroke="#9333ea" strokeWidth="1.5"/>
                                    <text x="20" y="42" fontSize="8" fill="#9333ea" textAnchor="middle">金文</text>
                                </svg>
                            );
                        case 'seal':
                            return (
                                <svg width="40" height="45" viewBox="0 0 40 45">
                                    <path d="M 16 8 L 14 12 M 20 8 L 20 12 M 24 8 L 26 12" 
                                          stroke="#9333ea" strokeWidth="2" strokeLinecap="round"/>
                                    <path d="M 12 14 L 28 14" stroke="#9333ea" strokeWidth="2"/>
                                    <path d="M 12 14 L 12 16 M 28 14 L 28 16" stroke="#9333ea" strokeWidth="1.5"/>
                                    <circle cx="20" cy="22" r="2" fill="#9333ea"/>
                                    <path d="M 16 20 Q 20 24, 24 20" stroke="#9333ea" strokeWidth="2" fill="none"/>
                                    <path d="M 18 26 L 15 32 M 20 27 L 20 32 M 22 26 L 25 32" 
                                          stroke="#9333ea" strokeWidth="2"/>
                                    <text x="20" y="42" fontSize="8" fill="#9333ea" textAnchor="middle">愛</text>
                                </svg>
                            );
                        case 'regular':
                            return (
                                <div className="text-center">
                                    <div className="text-3xl text-purple-700" style={{fontFamily: 'serif', fontWeight: 'bold'}}>愛</div>
                                    <p className="text-xs text-gray-500 mt-1">繁体</p>
                                </div>
                            );
                        case 'simplified':
                            return (
                                <div className="text-center">
                                    <div className="text-3xl text-purple-700" style={{fontFamily: 'system-ui, sans-serif'}}>爱</div>
                                    <p className="text-xs text-gray-500 mt-1">简体</p>
                                </div>
                            );
                        case 'emoji':
                            return (
                                <div className="text-center">
                                    <div className="text-3xl">❤️</div>
                                    <p className="text-xs text-gray-500 mt-1">表情</p>
                                </div>
                            );
                        default:
                            return null;
                    }
                };
                
                return (
                    <div className="page h-screen bg-gradient-to-b from-purple-900 via-blue-900 to-black flex flex-col items-center justify-center px-6 relative">
                        <div className="absolute inset-0">
                            {[...Array(50)].map((_, i) => (
                                <div
                                    key={i}
                                    className="absolute animate-twinkle"
                                    style={{
                                        left: `${Math.random() * 100}%`,
                                        top: `${Math.random() * 100}%`,
                                        animationDelay: `${Math.random() * 3}s`
                                    }}
                                >
                                    ✨
                                </div>
                            ))}
                        </div>
                        
                        <div className="bg-white/90 backdrop-blur rounded-2xl shadow-2xl p-6 max-w-md w-full z-10">
                            <h3 className="text-2xl font-bold text-center mb-2 text-purple-600">
                                文字的星河
                            </h3>
                            <p className="text-xs text-center text-gray-500 mb-1">从「好」到「爱」的演变之旅</p>
                            <p className="text-[10px] text-center text-gray-400 mb-3">
                                * 甲骨文时期尚无"爱"字，古人用"好"(女子)表达美好情感
                            </p>
                            
                            <div className="mb-6 overflow-x-auto">
                                <div className="flex justify-between items-center mb-4 min-w-full px-2">
                                    {evolution.map((item, idx) => (
                                        <div key={idx} className="text-center flex-1 min-w-[60px]">
                                            <div className="mb-1 flex justify-center items-center h-12">
                                                {renderEvolutionChar(item)}
                                            </div>
                                            <p className="text-xs text-gray-600 font-medium">{item.era}</p>
                                            <p className="text-[10px] text-gray-400">{item.year}</p>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            
                            <div className="bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-4 mb-4">
                                <p className="text-sm text-gray-700 text-center mb-3">
                                    写下你对文字与文明的感悟：
                                </p>
                                <textarea
                                    value={userMessage}
                                    onChange={(e) => setUserMessage(e.target.value)}
                                    placeholder="从甲骨文到emoji，你看到了什么..."
                                    className="w-full px-3 py-2 rounded-lg border border-purple-300 focus:outline-none focus:border-purple-500 resize-none"
                                    rows="3"
                                />
                            </div>
                            
                            {userMessage && (
                                <div className="text-center mb-4 p-3 bg-purple-50 rounded-lg">
                                    <p className="text-sm text-gray-600 mb-2">你的感悟：</p>
                                    <div className="flex flex-col items-center gap-2">
                                        <p className="text-base text-purple-700 italic">"{userMessage}"</p>
                                        <div className="flex gap-2">
                                            <span className="text-lg">📜</span>
                                            <span className="text-lg">→</span>
                                            <span className="text-lg">💌</span>
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            <button 
                                className="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-full hover:scale-105 transition-transform flex items-center justify-center"
                            >
                                <Share2 className="mr-2 w-4 h-4" />
                                生成专属海报，加入文明接力
                            </button>
                            
                            <p className="text-center text-sm text-gray-600 mt-4 inline-flex items-center justify-center w-full">
                                <Heart className="inline w-4 h-4 text-red-500 mr-1" />
                                {' '}已有 {participantCount.toLocaleString()} 人参与文明接力
                            </p>
                        </div>
                        
                        <div className="mt-6 text-center text-white max-w-md z-10">
                            <p className="text-sm opacity-90">
                                从刻骨铭心到指尖传情<br/>
                                变的是形式，不变的是<br/>
                                那颗想要表达、想要连接的心
                            </p>
                        </div>
                    </div>
                );
            };

            // 页面导航
            const pages = [
                <Page1 />,
                <Page2 />,
                <Page3 />,
                <Page4 />,
                <Page5 />,
                <Page6 />,
                <Page7 />,
                <Page8 />
            ];

            const handleTouchStart = (e) => {
                setTouchStart(e.touches[0].clientY);
            };

            const handleTouchEnd = (e) => {
                const touchEnd = e.changedTouches[0].clientY;
                if (touchStart - touchEnd > 50 && currentPage < pages.length - 1) {
                    setCurrentPage(currentPage + 1);
                }
                if (touchEnd - touchStart > 50 && currentPage > 0) {
                    setCurrentPage(currentPage - 1);
                }
            };

            return (
                <div 
                    className="h-screen overflow-hidden relative"
                    onTouchStart={handleTouchStart}
                    onTouchEnd={handleTouchEnd}
                >
                    {pages[currentPage]}
                    
                    {/* 页面指示器和滑动提示 */}
                    {currentPage > 0 && (
                        <>
                            <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 flex gap-2 z-50">
                                {pages.map((_, idx) => (
                                    <button
                                        key={idx}
                                        onClick={() => setCurrentPage(idx)}
                                        className={`w-2 h-2 rounded-full transition-all ${
                                            idx === currentPage 
                                                ? 'bg-white w-8' 
                                                : 'bg-white/50 hover:bg-white/75'
                                        }`}
                                    />
                                ))}
                            </div>
                            
                            {/* 移动端滑动提示 */}
                            {currentPage === 1 && (
                                <div className="fixed bottom-20 left-1/2 transform -translate-x-1/2 text-white/70 text-xs animate-pulse z-50">
                                    ↑ 上下滑动切换页面 ↓
                                </div>
                            )}
                        </>
                    )}
                    
                    {/* 导航按钮 */}
                    {currentPage > 0 && currentPage < pages.length - 1 && (
                        <>
                            {currentPage > 0 && (
                                <button 
                                    onClick={() => setCurrentPage(currentPage - 1)}
                                    className="fixed top-1/2 left-4 transform -translate-y-1/2 bg-white/20 backdrop-blur text-white p-2 rounded-full hover:bg-white/30 transition z-50"
                                >
                                    ←
                                </button>
                            )}
                            {currentPage < pages.length - 1 && (
                                <button 
                                    onClick={() => setCurrentPage(currentPage + 1)}
                                    className="fixed top-1/2 right-4 transform -translate-y-1/2 bg-white/20 backdrop-blur text-white p-2 rounded-full hover:bg-white/30 transition z-50"
                                >
                                    →
                                </button>
                            )}
                        </>
                    )}
                </div>
            );
        };

        // 渲染应用
        ReactDOM.render(<ZiZaiZiZai />, document.getElementById('root'));
    </script>
</body>
</html>